<template>
    <div class="tree-bar">
        <el-tree
        :data="treeData"
        :props="defaultProps"
        :highlight-current="true"
        :default-expanded-keys="[this.label]"
        node-key="label"
        ref="treeBox"
        class="elTree"
        @node-click="handleNodeClick"
        lazy
        :load="loadNode"
        ></el-tree>
    </div>
</template>
<script>
import { getJsyybmTree, getJsyybmGyTree } from '@/api/dmgl/jsyy.js';
export default {
    data() {
        return {
            treeData: [], // 分类树data
            filterText: '',
            defaultProps: {
                label: "label",
                children: "child",
                isLeaf: "leaf",
            },
            label: ''
        }
    },
    props: {
      propData: {
        type: String,
        default: function() {
          return '';
        }
      }
    },
    methods: {
        /**点击树节点 */
        handleNodeClick(data, node) {
            console.log(data)
            const that = this
            let tableObj = {}
            if (that.propData == 'zy') {
                tableObj = {
                    tdjsmLike: data.data.tdjsm,
                    jsflLike: '',
                    activeName: that.propData
                }
            } else {
                tableObj = {
                    jsflLike: data.data.fl,
                    tdjsmLike: '',
                    activeName: that.propData
                }
            }
            that.$emit("handleClickTreeNodeItem", tableObj)
        },

        /** 树的一次性加载 */
        loadNode(node, resolve) {
            if (node.level === 0) { 
                this.getTdjsyyTreeOne(resolve);
            } else if (node.level === 1) {
                this.getTdjsyyTreeRoot(node, resolve)
            } else if (node.level > 1) {
                this.getTdjsyyTree(node, resolve)
            }
        },

        /**获取一级节点数据 */
        getTdjsyyTreeOne(resolve){
            let res = []
            if (this.propData == 'zy') {
                res[0] = {
                    id: "0",
                    label: "中压技术原因编码",
                    icon: null,
                    children: null,
                    data: {
                        bzm: null,
                        fl: "",
                        id: "0",
                        jsqc: null,
                        tdjsm: "",
                        tdjsyy: "",
                        tjbzm: null,
                        zjm: null
                    }
                }
            } else {
                res[0] = {
                    id: "0",
                    label: "高压技术原因编码",
                    icon: null,
                    children: null,
                    data: {
                        bzm: null,
                        fl: "",
                        id: "0",
                        jsqc: "",
                        tdjsm: null,
                        tdjsyy: "",
                        tjbzm: null,
                        zjm: null
                    }
                }
            }
            this.label = res[0].label
            this.treeData = res;
            return resolve(res);
        },

        /**获取树 根节点数据*/
        async getTdjsyyTreeRoot(node, resolve){
            let reqData = {}
            let res = null
            if (this.propData == 'zy') {
                reqData = {
                    root: "1",
                    tdjsm: node.data.id === "0"? "" : ""
                }
                res = await getJsyybmTree(reqData);
            } else {
                reqData = {
                    root: "1",
                    jsfl: node.data.id === "0"? "" : ""
                }
                res = await getJsyybmGyTree(reqData);
            }
            if(res.code === 0){
                let req = res.data
                return resolve(res.data);
            }else{
                this.$message.error(res.message)
            }

        },
        /**获取树 下级节点数据 */
        async getTdjsyyTree(node, resolve) {
            console.log(node)
            let reqData = {}
            let res = null
            if (this.propData == 'zy') {
                reqData = {
                    root: "0",
                    tdjsm: node.data.data.tdjsm
                }
                res = await getJsyybmTree(reqData);
            } else {
                reqData = {
                    root: "0",
                    jsfl: node.data.data.fl
                }
                res = await getJsyybmGyTree(reqData);
            }
            if(res.code === 0) {
                let req = res.data
                return resolve(res.data);
            }else{
                this.$message.error(res.message)
            }
        }
    }
}
</script>
<style lang='scss' scoped>
label {
  font-weight: 400 !important;
}
.elTree{
  width: 100%;
  height: 100%;
  overflow: auto;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
</style>
